<template>
	<view>
		<view class="searchbox">
			<view class="searchimgbox">
				<image class="searchimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710752819733548.png"></image>
			</view>
			<input
				class="searchtext"
				type="text"
				v-model="golfname"
				placeholder="请输入关键字搜索"
				placeholder-class="placeholderStyle "
				@blur="handsearch"
			/>
		</view>
		<view v-if="list.length != 0">
			<x-scroll
				@scroll="scroll"
				:fixed="true"
				:isNav="true"
				@onRefresh="onRefresh"
				@scrolltolower="scrolltolower"
				:refresh="true"
			>
				<!-- <view class="searchbox">
            <view class="searchimgbox">
                <image class="searchimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710752819733548.png"></image>
            </view>
            <input class="searchtext" type="text" v-model="golfname" placeholder="请输入关键字搜索" placeholder-class="placeholderStyle " @blur="handsearch">
        </view> -->
				<view class="listbox" v-for="(item, index) in list" :key="index" @click="gotostadium(item.ID)">
					<view class="imgbox">
						<image class="courtimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17103974949781099.png"></image>
					</view>

					<view class="contentbox">
						<view class="shopName">{{ item.ShopName }}</view>
						<view class="labelbox">
							<text class="label" v-for="(value, i) in label" :key="i">{{ value }}</text>
						</view>
						<view class="time">营业时间：06:00~23:00</view>
						<view class="addressbox">
							<view class="address">{{ item.Address }}</view>
							<view class="move">{{ item.Distance / 100 > 100 ? '>100km' : item.Distance / 100 + 'km' }}</view>
						</view>
					</view>
				</view>
			</x-scroll>
		</view>
		<view class="nondbox" v-else>
			<text>未找到该场地</text>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			index: 1,
			size: 10,
			list: [],
			label: ['18洞果岭', '球童'],
			distance: null,
			nowLng: null,
			nowLat: null,
			golfname: '',
		};
	},
	methods: {
		//搜索
		handsearch() {
			if(this.golfname == ''){
				this.index = 1
			}
			this.list = [];
			this.getcourtlist();
		},
		//跳转球场详细
		gotostadium(id) {
			uni.navigateTo({
				url: `/pages/court/stadium?tabInd=${id}`,
			});
		},
		//球场列表
		async getcourtlist() {
			let res = await this.$api.post('/Shops/List', {
				PageIndex: this.index,
				PageSize: this.size,
				ShopName: this.golfname,
				City: '',
			});
			let a = res.data;
			if (this.golfname != '') {
				this.list = a;
			} else {
				// this.list = []
				this.list = this.list.concat(a);
			}
			// console.log('球场');
			console.log(this.list);
		},
		//滚动到底部触发
		async scrolltolower() {
			console.log('111');
			if (this.golfname == '') {
				this.index++;
				this.getcourtlist();
			}

			// this.getMsgNum();
		},
		scroll(e) {
			const detail = e.detail;
			// console.log(detail);
		},
		//下拉刷新
		onRefresh() {
			this.index = 1;
			this.getcourtlist();
		},
	},
	mounted() {
		this.getcourtlist();
		// this.getremove()
	},
};
</script>
<style lang="scss">
page{
	background-color: #f6f6f6;
}
.searchbox {
	padding: 20rpx 24rpx;
	display: flex;
	align-items: center;
	box-sizing: 36rpx;
	background-color: #fff;
	.searchimgbox {
		border-radius: 36rpx 0 0 36rpx;
		text-align: center;
		width: 10%;
		height: 72rpx;
		line-height: 72rpx;
		overflow: hidden;
		background-color: #f7f7f7;
		.searchimg {
			vertical-align: middle;
			width: 40rpx;
			height: 40rpx;
			margin: 0 0 12rpx 15rpx;
		}
	}
	.searchtext {
		flex: 1;
		background-color: #f7f7f7;
		color: #999999;
		height: 72rpx;
		border-radius: 0 36rpx 36rpx 0;
	}
	.input-placeholder{
	 color: #999;
	}
}
.placeholderStyle {
	color: rgba(255, 255, 255, 0.6); /* 占位符文本颜色 */
	// color: red;
	font-size: 28rpx; /* 占位符文本字体大小 */
	line-height: 72rpx;
}
.listbox {
	margin: 20rpx 24rpx;
	border-radius: 16rpx;
	min-height: 260rpx;
	display: flex;
	background-color: #fff;
	padding: 20rpx 20rpx;
	box-sizing: border-box;
	.imgbox {
		width: 35%;
		height: 100%;
		text-align: center;
		.courtimg {
			width: 210rpx;
			height: 210rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
			vertical-align: middle;
		}
	}

	.contentbox {
		width: 65%;
		height: 100%;
		margin-top: 10rpx;
		.shopName {
			width: 80%;
			color: #333;
			font-size: 30rpx;
			margin-bottom: 10rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.labelbox {
			margin-bottom: 20rpx;
			.label {
				font-size: 26rpx;
				color: #F56E1E;
				background: #FFEEE4;
				border-radius: 8rpx;
				margin-right: 20rpx;
				padding: 6px 12rpx;
				font-size: 20rpx;
			}
		}
		.time {
			font-size: 26rpx;
			color: #a5a5a5;
			margin-bottom: 10rpx;
		}
		.addressbox {
			width: 100%;
			display: flex;
			justify-content: space-between;
			.address {
				width: 70%;
				font-size: 26rpx;
				color: #a5a5a5;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.move {
				font-size: 26rpx;
				color: #a5a5a5;
			}
		}
	}
}
.nondbox {
	width: 30%;
	margin: 20rpx auto;
}
</style>
